<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Export to Excel</title>
</head>
<body>
<div id="list" style="display:flex">
    <table>
        <tbody>
            <tr>
                <td>
                    <div id="source_table" style="width:50%; height:200px;">
                        <table>
                            <thead>
                                <tr>
                                    <th>Module</th>
                                    <th>Layer</th>
                                    <th>Ope_No</th>
                                    <th>Flow</th>
                                    <th>Product</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Module1</td>
                                    <td>Data1</td>
                                    <td>Data2</td>
                                    <td>Flow1</td>
                                    <td>Product1</td>
                                </tr>
                                <tr>
                                    <td>Module2</td>
                                    <td>Data3</td>
                                    <td>Data4</td>
                                    <td>Flow1</td>
                                    <td>Product2</td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
                <td style="width:4px;"></td>
                <td>
                    <div id="target_table" style="width:50%; height:200px;">
                        <table>
                            <thead>
                                <tr>
                                    <th>Module</th>
                                    <th>Layer</th>
                                    <th>Ope_No</th>
                                    <th>Flow</th>
                                    <th>Product</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Module1</td>
                                    <td>Data1</td>
                                    <td>Data2</td>
                                    <td>Flow1</td>
                                    <td>Product1</td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>Module2</td>
                                    <td>Data4</td>
                                    <td>Data5</td>
                                    <td>Flow1</td>
                                    <td>Product1</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<button onclick="exportToExcel('list', 'compare')">Export to Excel</button>

<script>
    function exportToExcel(divId, fileName) {
        const listDiv = document.getElementById(divId);
        const sourceTable = listDiv.querySelector('#source_table table');
        const targetTable = listDiv.querySelector('#target_table table');

        const modules = {};

        // 按 Module 分组
        for (let i = 1; i < sourceTable.rows.length; i++) {
            const sourceRow = sourceTable.rows[i];
            const moduleName = sourceRow.cells[0].innerText;

            if (!moduleName) continue; // 跳过空行

            if (!modules[moduleName]) {
                modules[moduleName] = {
                    sourceRows: [],
                    targetRows: []
                };
            }
            modules[moduleName].sourceRows.push(sourceRow);
        }

        for (let i = 1; i < targetTable.rows.length; i++) {
            const targetRow = targetTable.rows[i];
            const moduleName = targetRow.cells[0].innerText;

            if (!moduleName) continue; // 跳过空行

            if (!modules[moduleName]) {
                modules[moduleName] = {
                    sourceRows: [],
                    targetRows: []
                };
            }
            modules[moduleName].targetRows.push(targetRow);
        }

        // 生成 Excel 文件
        let excelContent = `
            <?xml version="1.0"?>
            <?mso-application progid="Excel.Sheet"?>
            <Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
                      xmlns:o="urn:schemas-microsoft-com:office:office"
                      xmlns:x="urn:schemas-microsoft-com:office:excel"
                      xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet"
                      xmlns:html="http://www.w3.org/TR/REC-html40">
                <Styles>
                    <Style ss:ID="Default" ss:Name="Normal">
                        <Alignment ss:Vertical="Bottom"/>
                        <Borders/>
                        <Font ss:FontName="Calibri" ss:Size="11" ss:Color="#000000"/>
                        <Interior/>
                        <NumberFormat/>
                        <Protection/>
                    </Style>
                    <Style ss:ID="Header">
                        <Font ss:FontName="Calibri" ss:Size="11" ss:Color="#FFFFFF" ss:Bold="1"/>
                        <Interior ss:Color="#333333" ss:Pattern="Solid"/>
                    </Style>
                    <Style ss:ID="Green">
                        <Interior ss:Color="#00FF00" ss:Pattern="Solid"/>
                    </Style>
                    <Style ss:ID="Red">
                        <Interior ss:Color="#FF0000" ss:Pattern="Solid"/>
                    </Style>
                    <Style ss:ID="Gray">
                        <Interior ss:Color="#808080" ss:Pattern="Solid"/>
                    </Style>
                    <Style ss:ID="White">
                        <Interior ss:Color="#FFFFFF" ss:Pattern="Solid"/>
                    </Style>
                    <Style ss:ID="Warning">
                        <Font ss:FontName="Calibri" ss:Size="11" ss:Color="#FF0000" ss:Bold="1"/>
                        <Interior ss:Color="#FFFF00" ss:Pattern="Solid"/>
                    </Style>
                </Styles>
        `;

        // 添加原始数据到第一个 Sheet
        excelContent += `
            <Worksheet ss:Name="Original Data">
                <Table>
                    <!-- 添加警示框 -->
                    <Row>
                        <Cell ss:StyleID="Warning" ss:MergeAcross="10">
                            <Data ss:Type="String">公司机密 - 严禁外传</Data>
                        </Cell>
                    </Row>
                    <Row>
                        <Cell ss:StyleID="Header"><Data ss:Type="String">Module</Data></Cell>
                        <Cell ss:StyleID="Header"><Data ss:Type="String">Layer</Data></Cell>
                        <Cell ss:StyleID="Header"><Data ss:Type="String">Ope_No</Data></Cell>
                        <Cell ss:StyleID="Header"><Data ss:Type="String">Flow</Data></Cell>
                        <Cell ss:StyleID="Header"><Data ss:Type="String">Product</Data></Cell>
                        <Cell ss:StyleID="White"><Data ss:Type="String"></Data></Cell> <!-- 间隙 -->
                        <Cell ss:StyleID="Header"><Data ss:Type="String">Module</Data></Cell>
                        <Cell ss:StyleID="Header"><Data ss:Type="String">Layer</Data></Cell>
                        <Cell ss:StyleID="Header"><Data ss:Type="String">Ope_No</Data></Cell>
                        <Cell ss:StyleID="Header"><Data ss:Type="String">Flow</Data></Cell>
                        <Cell ss:StyleID="Header"><Data ss:Type="String">Product</Data></Cell>
                    </Row>
        `;

        // 添加 source 和 target 表格数据
        for (let i = 1; i < sourceTable.rows.length; i++) {
            const sourceRow = sourceTable.rows[i];
            const targetRow = targetTable.rows[i];

            // 检查是否为空行
            const isSourceEmpty = Array.from(sourceRow.cells).every(cell => !cell.innerText.trim());
            const isTargetEmpty = Array.from(targetRow.cells).every(cell => !cell.innerText.trim());

            if (isSourceEmpty && isTargetEmpty) {
                // 添加空行
                excelContent += `<Row>`;
                for (let j = 0; j < sourceRow.cells.length; j++) {
                    excelContent += `<Cell ss:StyleID="White"><Data ss:Type="String"></Data></Cell>`;
                }
                excelContent += `<Cell ss:StyleID="White"><Data ss:Type="String"></Data></Cell>`; // 间隙
                for (let j = 0; j < targetRow.cells.length; j++) {
                    excelContent += `<Cell ss:StyleID="White"><Data ss:Type="String"></Data></Cell>`;
                }
                excelContent += `</Row>`;
                continue;
            }

            // 比较 Layer 和 Ope_No
            const isMatch = sourceRow.cells[1].innerText === targetRow.cells[1].innerText &&
                            sourceRow.cells[2].innerText === targetRow.cells[2].innerText;

            excelContent += `<Row>`;
            for (let j = 0; j < sourceRow.cells.length; j++) {
                const styleID = isMatch ? 'Green' : 'Red';
                excelContent += `<Cell ss:StyleID="${styleID}"><Data ss:Type="String">${sourceRow.cells[j].innerText}</Data></Cell>`;
            }
            excelContent += `<Cell ss:StyleID="White"><Data ss:Type="String"></Data></Cell>`; // 间隙
            for (let j = 0; j < targetRow.cells.length; j++) {
                const styleID = isMatch ? 'Green' : 'Red';
                excelContent += `<Cell ss:StyleID="${styleID}"><Data ss:Type="String">${targetRow.cells[j].innerText}</Data></Cell>`;
            }
            excelContent += `</Row>`;
        }

        excelContent += `
                </Table>
            </Worksheet>
        `;

// 添加按 Module 分组的 Sheet
for (const module in modules) {
    excelContent += `
        <Worksheet ss:Name="${module}">
            <Table>
                <Row>
                    <Cell ss:StyleID="Header"><Data ss:Type="String">Module</Data></Cell>
                    <Cell ss:StyleID="Header"><Data ss:Type="String">Layer</Data></Cell>
                    <Cell ss:StyleID="Header"><Data ss:Type="String">Ope_No</Data></Cell>
                    <Cell ss:StyleID="Header"><Data ss:Type="String">Flow</Data></Cell>
                    <Cell ss:StyleID="Header"><Data ss:Type="String">Product</Data></Cell>
                    <Cell ss:StyleID="White"><Data ss:Type="String"></Data></Cell> <!-- 间隙 -->
                    <Cell ss:StyleID="Header"><Data ss:Type="String">Module</Data></Cell>
                    <Cell ss:StyleID="Header"><Data ss:Type="String">Layer</Data></Cell>
                    <Cell ss:StyleID="Header"><Data ss:Type="String">Ope_No</Data></Cell>
                    <Cell ss:StyleID="Header"><Data ss:Type="String">Flow</Data></Cell>
                    <Cell ss:StyleID="Header"><Data ss:Type="String">Product</Data></Cell>
                </Row>
    `;

    const sourceRows = modules[module].sourceRows;
    const targetRows = modules[module].targetRows;

    // 创建一个 Map 来存储 targetRows 的 Layer 和 Ope_No
    const targetMap = new Map();
    for (const targetRow of targetRows) {
        const key = `${targetRow.cells[1].innerText}-${targetRow.cells[2].innerText}`; // Layer-Ope_No
        targetMap.set(key, targetRow);
    }

    // 遍历 sourceRows，匹配 targetRows
    for (const sourceRow of sourceRows) {
        const key = `${sourceRow.cells[1].innerText}-${sourceRow.cells[2].innerText}`; // Layer-Ope_No
        const targetRow = targetMap.get(key);

        if (!targetRow) {
            // 如果 targetRows 中没有匹配的行，填充灰色
            excelContent += `<Row>`;
            for (let j = 0; j < sourceRow.cells.length; j++) {
                excelContent += `<Cell ss:StyleID="Gray"><Data ss:Type="String">${sourceRow.cells[j].innerText}</Data></Cell>`;
            }
            excelContent += `<Cell ss:StyleID="White"><Data ss:Type="String"></Data></Cell>`; // 间隙
            for (let j = 0; j < sourceRow.cells.length; j++) {
                excelContent += `<Cell ss:StyleID="Gray"><Data ss:Type="String"></Data></Cell>`;
            }
            excelContent += `</Row>`;
        } else {
            // 如果匹配，比较其他列的值
            const isMatch = sourceRow.cells[3].innerText === targetRow.cells[3].innerText && // Flow
                           sourceRow.cells[4].innerText === targetRow.cells[4].innerText; // Product

            excelContent += `<Row>`;
            for (let j = 0; j < sourceRow.cells.length; j++) {
                const styleID = isMatch ? 'Green' : 'Red';
                excelContent += `<Cell ss:StyleID="${styleID}"><Data ss:Type="String">${sourceRow.cells[j].innerText}</Data></Cell>`;
            }
            excelContent += `<Cell ss:StyleID="White"><Data ss:Type="String"></Data></Cell>`; // 间隙
            for (let j = 0; j < targetRow.cells.length; j++) {
                const styleID = isMatch ? 'Green' : 'Red';
                excelContent += `<Cell ss:StyleID="${styleID}"><Data ss:Type="String">${targetRow.cells[j].innerText}</Data></Cell>`;
            }
            excelContent += `</Row>`;

            // 从 targetMap 中移除已匹配的行
            targetMap.delete(key);
        }
    }

    // 处理 targetRows 中未匹配的行
    for (const targetRow of targetMap.values()) {
        excelContent += `<Row>`;
        for (let j = 0; j < targetRow.cells.length; j++) {
            excelContent += `<Cell ss:StyleID="Gray"><Data ss:Type="String"></Data></Cell>`;
        }
        excelContent += `<Cell ss:StyleID="White"><Data ss:Type="String"></Data></Cell>`; // 间隙
        for (let j = 0; j < targetRow.cells.length; j++) {
            excelContent += `<Cell ss:StyleID="Gray"><Data ss:Type="String">${targetRow.cells[j].innerText}</Data></Cell>`;
        }
        excelContent += `</Row>`;
    }

    excelContent += `
            </Table>
        </Worksheet>
    `;
}
        excelContent += `</Workbook>`;

        // 创建下载链接
        const blob = new Blob([excelContent], { type: 'application/vnd.ms-excel' });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = `${fileName}.xls`;
        link.click();
    }
</script>
</body>
</html>